<style lang="less" scoped>
	/*首页*/
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		.indexWrap{
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -540px;
			width: 1080px;
			height: 1920px;
			background: url(../../images/bgb.png) no-repeat;
			/*margin: 0 auto;*/
			overflow: hidden;
			/*position: relative;*/
			font-family: "幼圆";
			transition: all 1s;
		}
		.zhanghao>p{
			font-size: 72px;
			color: #7d675b;
			text-align: center;
			margin-top: 285px;
			font-weight: 100;
		}
		.indexUser{
			width: 765px;
			height: 120px;
			border: 2px solid #7d675b;
			background-color: rgba(255,255,255,0.5);
			display: inline-block;
			margin-top: 140px;
			margin-left: 157.5px;
			box-sizing: border-box;
			font-size: 48px;
			font-weight: 100;
			text-indent: 40px;
		}
		.indexPassword{
			width: 765px;
			height: 120px;
			border: 2px solid #7d675b;
			background-color: rgba(255,255,255,0.5);
			display: inline-block;
			box-sizing: border-box;
			margin-top: 44px;
			margin-left: 157.5px;	
			font-size: 48px;
			font-weight: 100;
			text-indent: 40px;
		}
		.indexLogin{
			width: 320px;
			height: 120px;
			border: 2px solid #7d675b;
			text-align: center;
			line-height: 120px;
			display: inline-block;
			margin-top: 100px;
			margin-left: 157.5px;
			color: white;
			font-size: 48px;
			background-color: #7d675b;
			font-weight: 100;
		}
		.backHome{
			width: 320px;
			height: 120px;
			border: 2px solid #7d675b;
			text-align: center;
			line-height: 120px;
			display: inline-block;
			margin-top: 100px;
			margin-left: 125px;
			font-size: 48px;
			font-weight: 100;
			color: #7d675b;
		}
		.wechatLogin{
			width: 770px;
			height: 120px;
			background-color: #23C253;
			margin-top: 140px;
    		margin-left: 157.5px;
    		line-height: 120px;
    		font-size: 48px;
    		color: #fff;
    		cursor: pointer;
		}
		.wechatLogin img{
			vertical-align: middle;
			margin-left: 170px;
			margin-right: 27px;
		}
		.zhanghao{
		}
		.erweima{
			height: 1362px;
		}
		.erweima-title{
			width: 100%;
			line-height: 100px;
			font-size: 72px;
			color: #7D675B;
			text-align: center;
			margin-top: 269px;
		}
		.erweima-show{
			width: 460px;
			height: 588px;
			/*background-color: white;*/
			margin-left: 310px;
			margin-top: 123px;
			display: flex;
    		justify-content: center;
    		align-items: center;
		}
		.erweima-show>iframe{
			width: 100%;
			height: 100%;
		}
		.erweima-btn{
			width: 770px;
			height: 120px;
			line-height: 120px;
			background-color: #7D675B;
			color: #fff;
			text-align: center;
			font-size: 48px;
			margin-left: 155px;
			margin-top: 128px;
			cursor: pointer;
		}
		/**/
		.indexWrap2{
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -540px;
			width: 1080px;
			height: 1920px;
			background: url(../../images/bgb2.png) no-repeat;
			overflow: hidden;
			font-family: "幼圆";
			transition: all 1s;
			display: none;
		}
		.impowerBox .qrcode{
			width: 450px;
		}
		.impowerBox .title{
			display: none;
		}
		.impowerBox .status p{
			color: #7D675B;
			font-size: 30px;
		}
		/*底部*/
		.big-footer{
			width: 100%;
			margin: 130px 0 40px;
		}
		.big-footer>span:nth-child(1){
			display: inline-block;
			width: 87px;
			height: 2px;
			background-color: #7D675B;
			margin-left: 305px;
			vertical-align: super;
		}
		.big-footer>span:nth-child(2){
			display: inline-block;
			font-size: 36px;
			color: #7D675B;
			line-height: 50px;
			margin-left: 35px;
		}
		.big-footer>span:nth-child(3){
			display: inline-block;
			width: 87px;
			height: 2px;
			background-color: #7D675B;
			margin-left: 35px;
			vertical-align: super;
			
		}
		.big-footer-div{
			width: 588px;
			height: 195px;
			margin-left: 246px;
		}
		.big-footer-div .d1{
			width: 156px;
			height: 195px;
			float: left;
		}
		.d1 img{
			width: 148px;
			height: 148px;
			border-radius: 50%;
			margin-left: 4px;
		}
	
		.d1 span{
			color: white;
			display: inline-block;
			width: 100%;
			text-align: center;
			font-size: 24px;
			margin-top: 13px;
		}
		.d1 span em{
			font-style: normal;
			font-size: 12px;
			line-height: 26px;
			vertical-align: text-top;
		}
		.d2{
			margin: 0 60px;
		}
</style>
<template>
<div>
    <div class="indexWrap">
        <!--账号密码登录-->
        <div class="zhanghao">
            <p>人文纪念馆登录</p>
            <input type="text" name="loginName" id="loginName" v-model="username" placeholder="请输入用户名" class="indexUser" maxlength='20'/>
            <input type="password" name="password" id="password" v-model="pwd" placeholder="请输入密码"  class="indexPassword" maxlength='20'/>
            <div class="indexLogin" @click="login">登录</div>
            <div class="backHome">回首页</div>
            <div class="wechatLogin"><img src="../../images/Wechaticon.png"/><span>微信扫一扫登录</span></div>
        </div>	
        <!--底部-->
        <p class="big-footer">
            <span></span>
            <span>自然葬贡献者</span>
            <span></span>
        </p>
        <div class="big-footer-div">
            <a href="http://www.reborndata.com/cmt?hid=010-00000022">
                <div class="d1">
                    <img src="../../images/jobs.png"/>
                    <span>高天鹏</span>
                </div>
            </a>
            <a href="http://www.reborndata.com/cmt?hid=0315-00000008">
                <div class="d1 d2">
                    <img src="../../images/liwu.png"/>
                    <span>李武</span>
                </div>
            </a>	
            <div class="d1">
                <img src="../../images/more.png"/>
            </div>				
        </div>
    </div>
    <div class="indexWrap2">
        <!--微信扫一扫登录-->
        <div class="erweima">
            <!--二维码-->
            <p class="erweima-title">微信扫一扫登录</p>
            <div class="erweima-show" id="weixin_login_container"></div>
            <!--回首页-->
            <p class="erweima-btn">回首页</p>
        </div>
    </div>
</div>
	
</template>
<script>
    
    import global from '../../config/global'
    import { mapActions } from 'vuex';
    import { USER_SIGNIN } from 'store/user';
    export default {
		data(){
			return{
                "username":"",
				"pwd":"",
				threeUrl:global.threeUrl,
			}
		},
		created() {
            
		},
		components: {
        },
        computed: {...mapActions({ user: state => state.user })},
		watch:{
		},
		mounted(){
			var this_ = this;
            if(location.search.split("=")[1]){
                this.callbackFN(location.search.split("=")[1]);
            }
            $(".wechatLogin").click(function () {
                $(".indexWrap2").css({
                    "transform":"perspective(1000px) rotateY(0deg)",
                });
                $(".indexWrap").css({
                    "transform":"perspective(1000px) rotateY(180deg)",
                });
                setTimeout(function () {
                    $(".indexWrap").hide();
                    $(".indexWrap2").show();
                    var obj = new WxLogin({
                        id:"weixin_login_container", 
                        appid: "wx5364bc6a94eff485", 
                        scope: "snsapi_login", 
                        redirect_uri: this_.threeUrl+"/largescreen",
                        state: "STATE",
                        style: "",
                        herf:""
                    });
                },700)
            });
            $(".erweima-btn").click(function () {
                $(".indexWrap").css({
                    "transform":"perspective(1000px) rotateY(0deg)",
                });
                $(".indexWrap2").css({
                    "transform":"perspective(1000px) rotateY(180deg)",
                });
                setTimeout(function () {
                    $(".indexWrap2").hide();
                    $(".indexWrap").show();
                },700)
            })
		},
		methods:{
            ...mapActions([USER_SIGNIN]),
			login(){
                this.$http.post(global.host+"/login/largescreen/check.json",{"loginName":this.username,"password":this.pwd})
                .then((response) => {
                        if(response.body.status=="2"){
							this.$Message.error(response.body.message);
						}else{
							this.USER_SIGNIN((response.body.result));//存入登录状态
                        	this.$router.push({ path: '/biglist' });//跳转大屏列表
						}
                    })
                .catch(function (response) {
                })
            },
            callbackFN(abc){//微信回调
				this.$http.post(global.host+'/third/weixin/login/large?code='+abc)	//确认登录之后上面那个alert没弹
					.then((response) => {						
						if(response.body.result.status==1){
							this.USER_SIGNIN((response.body.result));//存入登录状态									
							this.username = response.body.result.nickname;//用户名称								
							this.userheardImg = global.host+response.body.result.headAvatar;//用户头像 
							this.loginstatus = true;//登录状态
							this.$router.push({ path: '/biglist' });//跳转传记页面
						}else if(response.body.result.status==3){
							//未绑定过
							this.$Message.error('该账户未绑定过手机号');
						}
						
					})
			}
		}
    }
</script>